<template>
	<view class="search-container">
		<view class="search">
			<input v-model="value" @input="onInput" :auto-focus="true" confirm-type="搜索" @confirm="onSearch" type="text"
				placeholder="请输入关键字查询" style="height: 60rpx;line-height: 60rpx;width: calc(100% - 60rpx);" />
			<image @click="onSearch" style="width: 40rpx;height: 40rpx;margin-top: 10rpx;"
				src="../../static/images/search.png">
			</image>
		</view>
		<scroll-view scroll-y class="scroll">
			<view v-if="videosDatas.length">
				<view v-if="videosDatas.length">
					<view class="list">
						<view v-for="(item,index) in videosDatas" :key="index" @click="onToVideos(item)" class="item">
							<image :src="item.img" class="item-img" mode="aspectFill"></image>
							<view class="text-ellipsis" style="font-size: 26rpx;">{{item.name}}</view>
						</view>
					</view>
				</view>
				<noData v-else msg="换一个关键字试试吧!" />
			</view>
			<view v-if="!value">
				<view v-for="(item,index) in recommend" :key="index" @click="onToVideos(item)"
					style="display: flex;margin-top: 20rpx;">
					<view class="num-icon">
						{{index + 1}}
					</view>
					<view class="text-ellipsis name">
						{{item.name}}
					</view>
				</view>
			</view>
			<view v-if="value&&videosDatas&&!videosDatas.length" class="empty">
				<image src="@/static/images/empty.png" mode="aspectFit" style="width: 100%;"></image>
			</view>
			<MyUseOut :showModal="isUseOut" @close="isUseOut=false" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		searchVideos,
		seachRecommend
	} from '@/api/home.js'
	import noData from "../../components/my/noData.vue"
	export default {
		components: {
			noData
		},
		data() {
			return {
				// 输入值
				value: "",
				// 搜索推荐
				recommend: [],
				// 搜索结果
				videosDatas: [],
				isUseOut: false,
			}
		},
		onLoad(options) {
			if (options.name) {
				this.value = options.name
				this.onSearch()
			}
		},
		onShow() {
			this.doGetSeachRecommend();
		},
		mounted() {

		},
		methods: {
			// 搜索
			onSearch() {
				if (!this.value) return;
				searchVideos({
					search: this.value
				}).then(res => {
					this.videosDatas = res.data.data || [];
				})
			},
			// 获取搜索推荐
			doGetSeachRecommend() {
				seachRecommend().then(res => {
					this.recommend = res.data;
				})
			},
			// 前往观看视频
			onToVideos(item) {
				if (!uni.getStorageSync('infinite')) {
					this.isUseOut = true
					return
				}
				uni.navigateTo({
					url: "/pages/watchMovie/videos?id=" + item._id
				})
			},
			// 输入框输入
			onInput(event) {
				if (!event.detail.value) {
					this.videosDatas = [];
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		overflow-y: hidden;
	}

	.search-container {
		margin: 20rpx;
		height: calc(100vh - var(--window-top) - 40rpx);
	}

	.search {
		height: 60rpx;
		border: 4rpx solid #fc455d;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		padding: 0 20rpx;
	}

	.scroll {
		width: 100%;
		height: calc(100% - 100rpx);
		margin-top: 20rpx;

		.name {
			width: calc(100% - 80rpx);
			margin-left: 20rpx;
			line-height: 60rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
		}
	}

	.num-icon {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #fc455d;
		border-radius: 30rpx;
		color: white;
		text-align: center;
	}

	.item {
		width: 335rpx;
		text-align: center;
		padding: 10rpx;

		.item-img {
			width: 100%;
			height: 150rpx;
			border-radius: 20rpx;
		}
	}
</style>